<template>
  <div class="detail-wrapper">
    <el-page-header @back="goBack" content="产品详情"> </el-page-header>
    <!-- <el-divider></el-divider> -->
    <div class="topBox paddingBorder">
      <el-descriptions
        class="margin-top"
        title="产品名称"
        :column="3"
        :labelStyle="labelStyle"
        :contentStyle="contentStyle"
        border
      >
        <template slot="extra">
          <el-button type="primary" size="small" @click="toEdit"
            >编辑</el-button
          >
          <el-button type="primary" size="small" @click="handleDelete"
            >删除</el-button
          >
        </template>
        <el-descriptions-item>
          <template slot="label"> 创建人 </template>
          {{ dataForm.add_user_name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 创建时间 </template>
          {{ dataForm.add_time }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 最后修改人 </template>
          {{ dataForm.operator_user }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 修改时间 </template>
          {{ dataForm.operator_time }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="top36 prodBox paddingBorder">
      <div class="titleLabel">产品信息</div>
      <el-descriptions
        class="margin-top top36"
        title="基本信息"
        :column="3"
        :labelStyle="labelStyle"
        :contentStyle="contentStyle"
        border
      >
        <el-descriptions-item>
          <template slot="label"> 产品编号 </template>
          {{ dataForm.product_serial }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 产品名称 </template>
          {{ dataForm.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 产品分类 </template>
          {{ dataForm.classify_str }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 销售单价 </template>
          {{ dataForm.sale_price }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 品牌 </template>
          {{ dataForm.brand }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 排序 </template>
          {{ dataForm.sort }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 产品有效期 </template>
          {{ dataForm.indate }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 最小库存数 </template>
          {{ dataForm.min_stock }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 报警天数 </template>
          {{ dataForm.alarm_day }}
        </el-descriptions-item>
        <el-descriptions-item :span="3">
          <template slot="label"> 备注 </template>
          {{ dataForm.remarks }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 产品图片 </template>
          <div class="prodImgBox horizontalCenter">
            <div
              class="imgItem"
              v-for="(item, index) in dataForm.pics"
              :key="index"
              @click="handlePreview(item)"
            >
              <img :src="item" />
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <div class="descMockBox">
        <div class="descMockLabel">产品规格</div>
        <!-- :span-method="objectSpanMethod" -->
        <el-table
          class="tableWrapper"
          :data="dataForm.sku_list"
          border
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column
            prop="firstColumn"
            label="规格1"
            header-align="center"
            align="center"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="secondColumn"
            label="规格2"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="pic"
            label="SKU图片"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <el-upload
                class="upload-demo hide"
                ref="upload"
                action=""
                :disabled="true"
                :auto-upload="false"
                :file-list="scope.row.pics"
                :limit="1"
                :on-preview="handlePictureCardPreview"
                list-type="picture-card"
                name="pic"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </template>
          </el-table-column>
          <el-table-column
            prop="sale_price"
            label="销售单价（人民币）"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="indate"
            label="产品有效期（天）"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="min_stock"
            label="库存限制"
            header-align="center"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>

      <el-descriptions
        class="margin-top top36"
        title="包装信息"
        :column="3"
        :labelStyle="labelStyle"
        :contentStyle="contentStyle"
        border
      >
        <el-descriptions-item>
          <template slot="label"> 包装要求 </template>
          {{ dataForm.packaging }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 每箱个数 </template>
          {{ dataForm.box_capacity }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 纸箱尺寸 </template>
          长 {{ dataForm.box_size_long }} cm * 宽
          {{ dataForm.box_size_wide }} cm * 高 {{ dataForm.box_size_high }} cm
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 其他特殊要求 </template>
          {{ dataForm.others_remarks }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <el-backtop></el-backtop>
    <el-dialog :visible.sync="dialogVisible" title="查看">
      <img width="100%" :src="dialogImageUrl" class="avatar" />
    </el-dialog>
  </div>
</template>

<script>
import { addDynamicRoute } from "@/router";
import { getProductDetail, deleteProduct } from "@/api";
export default {
  data() {
    return {
      dataForm: {
        id: "",
      },
      dialogImageUrl: "",
      dialogVisible: false,
      labelStyle: {
        width: "150px",
      },
      contentStyle: {
        width: "28vw",
      },
    };
  },
  computed: {},
  activated() {
    const id = this.$route.params.id;
    this.dataForm.id = id;
    if (id) this.fetchDetail(id);
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    async handleDelete() {
      this.$confirm("此操作将删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await deleteProduct({ id: this.dataForm.id });
          if (res?.status === 1) {
            this.$message.success(res?.msg || "");
            this.$router.go(-1);
          }
        })
        .catch(() => {});
    },
    async fetchDetail(id) {
      const params = {
        id,
      };
      const res = await getProductDetail(params);
      console.log(res);
      if (res?.status === 1) {
        const data = res?.data || {};
        if (data.is_spec === 1) {
          data.sku_list.forEach((item) => {
            const temp = item.sku_name.split("+");
            item.firstColumn = temp[0];
            item.secondColumn = temp[1];
            let pic = item.pic;
            let fillPic = pic ? [{ name: "", url: item.pic || "" }] : [];
            item.pics = fillPic;
          });
        } else {
          data.sku_list.forEach((item) => {
            item.firstColumn = item.sku_name;
            let pic = item.pic;
            let fillPic = pic ? [{ name: "", url: item.pic || "" }] : [];
            item.pics = fillPic;
          });
        }
        this.dataForm = data;
        console.log(data);
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    handlePreview(url) {
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    toEdit() {
      const routeParams = {
        routeName: `product-management__edit`,
        title: `产品管理 - 编辑`,
        path: "product/management-edit",
        params: {
          id: this.dataForm.id || "",
        },
      };
      addDynamicRoute(routeParams, this.$router);
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-wrapper {
  background: #fff;
  padding: 20px;
  ::v-deep .el-page-header__title,
  .el-page-header__content {
    font-size: 12px;
  }

  ::v-deep .el-page-header__content {
    font-size: 12px;
  }

  // ::v-deep .el-descriptions__title {
  //   position: relative;
  //   padding-left: 16px;
  //   &::before {
  //     background: $mainColor;
  //     content: '';
  //     display: inline-block;
  //     height: 19px;
  //     left: 0;
  //     position: absolute;
  //     top: calc(50% - 10px);
  //     width: 3px;
  //   }
  // }

  .topBox {
    margin-top: 36px;
    ::v-deep .el-descriptions__title {
      font-size: 20px;
      font-weight: 600;
      position: relative;
      padding-left: 16px;
      color: #303133;
      &::before {
        background: $mainColor;
        content: "";
        display: inline-block;
        height: 20px;
        left: 0;
        position: absolute;
        top: calc(50% - 10px);
        width: 3px;
      }
    }
  }

  .prodBox {
    .prodImgBox {
      .imgItem {
        width: 64px;
        height: 64px;
        margin-left: 12px;
        cursor: pointer;
        &:first-child {
          margin-left: 0;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .tableWrapper {
      ::v-deep .el-upload--picture-card {
        width: 64px;
        height: 64px;
        line-height: 80px;
      }

      ::v-deep .el-upload-list--picture-card .el-upload-list__item {
        width: 64px;
        height: 64px;
        margin: 0;
      }
    }
  }
  .hide {
    ::v-deep .el-upload--picture-card {
      display: none;
    }
  }
}
</style>

<style lang="scss">
::v-deep .el-page-header__title {
  font-size: 12px;
}
</style>
